<wicket:extend>

    <!-- Sidebar -->

      <div style="position: relative; background-color: #2D475C; float:left; width: 200px; height: 600px;">
        <div style="padding-top: 10px; margin-left: auto; margin-right: auto; width: 176px;"> 
            <img wicket:id="sidebar" src="side-bar.png" border="0" usemap="#Map" />
            <map name="Map" id="Map">
                <area shape="rect" coords="0,32,176,62" wicket:id="AquaponicsPageLink" href="#" />
                <area shape="rect" coords="2,62,175,92" wicket:id="LightingPageLink" href="#" />
                <area shape="rect" coords="1,92,175,122" wicket:id="SecurityPageLink" href="#" />
                <area shape="rect" coords="0,122,175,152" wicket:id="ClimatePageLink" href="#" />
                <area shape="rect" coords="1,153,175,183" wicket:id="WaterPageLink" href="#" />
            </map>
        </div>
        <div style="position: absolute; bottom: 0; padding: 10px;">
            <img wicket:id="logo" src="logo.png"/>
        </div>
      </div>

    <!-- Water Charts -->

<form wicket:id="form">
<div class="preappend-1 span-7" style="border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
<table border="2" bordercolor="gray" bgcolor="black">
<tr>
<th>
      <div align="center"><b><font size="5" color="white"><u>____Smart Temp____</u></font></b></div></th>
</tr>
  <tr >
    <td bgcolor="black">
      <font size="2" color="white">
      	<b>Duration of Shower: </b>
      	<input wicket:id="durationBox" type="text" size="3" maxlength="3" value="15"/> <b>mins</b>
      </font>
  	</td>
  </tr>
  
 <tr >
    <td bgcolor="black">
      <font size="2" color="white">
         <b>Max Hot Water Usage:</b>
         <input wicket:id="usageBox" type="text" size="3" maxlength="3" value="6"/>  <b>gal(s)</b>
      </font>
    </td>
 </tr>
 
  <tr >
    <td bgcolor="black">
      <font size="2" color="white">
         <b>Minimum Temperature:</b>
         <input wicket:id="minTempBox" type="text" size="3" maxlength="3"value="90"/> <b>F</b>
      </font>
    </td>
 </tr>
 
  <tr >
    <td bgcolor="black">
      <div align="center"><input wicket:id="calc" type="submit" value="Calculate!" /></div>
    </td>
 </tr>
 
    <tr >
    <td bgcolor="black">
      <font size="3" color="white">
         <b>Suggested Temperature:</b>
      </font>
      <font size="2" color="orange">
         <b>
         <span wicket:id="sugTemp">[Hello World message will go here]</span>
         </b>
      </font>
    </td>
   </tr>

</table>
</div>


<div class="span-5" style="border:2px gray solid;-webkit-border-radius: 10px; -moz-border-radius: 10px;">
<table border="2" bordercolor="gray" bgcolor="black">
  <tr>
    <th>
      <div align="center"><b><font size="5" color="white"><u>Tank Levels</u></font></b></div>
    </th>
  </tr>
  <tr >
    <td bgcolor="black">
      <img wicket:id = "image3"/>
  	</td>
  </tr>
</table>
</div>

<div class="span-5 last" style="border:2px gray solid;-webkit-border-radius: 10px; -moz-border-radius: 10px;">
<table border="2" bordercolor="gray" bgcolor="black">
  <tr>
    <th>
      <div align="center"><b><font size="5" color="white"><u>Water Heater Settings</u></font></b></div>
    </th>
  </tr>
  <span wicket:id="power"> 
    <input type="radio" wicket:id="on"/><font color="green" size="3"><b>ON</b></font>
    <input type="radio" wicket:id="off"/><font color="red" size="3"><b>OFF</b></font>
  </span>
  <tr>
    <td>
    	
	</td>
  </tr>
	  
  <tr >
    <td bgcolor="black">
       <font size="2" color="white">
         Current Tank Temp:
      </font>
      <font size="2" color="red">
         <b>
         <span wicket:id="tankTemp">[Hello World message will go here]</span>
         </b>
      </font>
      
  	</td>
  </tr>
  
    <tr >
    <td bgcolor="black">
       <font size="2" color="white">
         Current Tank Volume:
      </font>
      <font size="2" color="lightblue">
         <b>
         <span wicket:id="tankVol">[Hello World message will go here]</span>
         </b>
      </font>
  	</td>
  </tr>
</table>
</div>

<div class="span-5" style="border:2px gray solid;-webkit-border-radius: 10px; -moz-border-radius: 10px;">
<table border="2" bordercolor="gray" bgcolor="black">
  <tr>
    <th>
      <div align="center"><b><font size="5" color="white"><u>Manual Control</u></font></b></div>
    </th>
  </tr>
  <tr >
    <td bgcolor="black">
      <font size="4" color="white">
      	<b>Water Temp: </b>
      	<input wicket:id="manualBox" type="text" size="4" maxlength="3" value="98"/> <b>F</b>
      </font>
  	</td>
  </tr>
  
  <tr>
    <td>
      <div align="center"><input wicket:id="change" type="submit" value="Change" /></div>
    </td>
    </tr>
</table>

</div>
</form>

<div class="span-5 last">
<img wicket:id = "waterChart" style="height:270px"/>
</div>

</wicket:extend>
